<template>
  <van-nav-bar
    safe-area-inset-top
    :title="title"
    :fixed="true"
    :placeholder="true"
    :left-arrow="back && !close"
    :left-text="back && !close ? '返回' : undefined"
    @click-left="onClickLeft"
  >
    <template v-if="close" #left>
      <van-icon name="cross" size="18" @click.stop="onClose" />
    </template>
  </van-nav-bar>
</template>

<script setup>
  import * as dd from 'dingtalk-jsapi'
  const router = useRouter()
  const route = useRoute()
  const title = ref('首页')
  const back = ref(false)
  const backPath = ref(undefined)
  const close = ref(false)
  watch(
    () => route.meta,
    res => {
      title.value = res.title
      back.value = res.back
      backPath.value = res.backPath
      close.value = res.close
    },
    {immediate: true}
  )
  const onClickLeft = () => {
    if (backPath.value) {
      router.replace({path: backPath.value})
    } else {
      router.go(-1)
    }
  }
  const onClose = () => {
    if (dd.env.platform !== 'notInDingTalk') {
      dd.ready(() => {
        dd.biz.navigation.close()
      })
    }
  }
</script>

<style lang="scss">
  .van-nav-bar {
    box-shadow: 0px 4px 24px 0px rgba(100, 101, 102, 0.12);
    // .van-nav-bar__content {
    //   height: 108px;
    //   .van-nav-bar__title {
    //     font-size: 32px;
    //     line-height: 108px;
    //   }
    // }
  }
</style>
